﻿<script src="~/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.isEasyUI.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.position.js"></script>

<div class="easyui-layout" data-options="fit:true">
    <div id="pNorth" data-options="region:'north',title:'北部面板',border:false" style="height:90px;border-bottom-width:1px;padding:10px;">
        <a id="btnCheckInLayout" class="easyui-linkbutton" data-options="iconCls:'icon-add'">检查 北部面板</a>
    </div>
    <div data-options="region:'west',title:'西部面板',border:false" style="width:180px;border-right-width:1px;">
        <div class="easyui-accordion" data-options="fit:true">
            <div id="pAccordion1" data-options="title:'手风琴1号面板'" style="padding:10px;">
                <a id="btnCheckInArrordion" class="easyui-linkbutton" data-options="iconCls:'icon-add'">检查 手风琴1号面板</a>
            </div>
            <div data-options="title:'手风琴2号面板'">
                手风琴2号面板内容
            </div>
            <div data-options="title:'手风琴3号面板'">
                手风琴3号面板内容
            </div>
        </div>
    </div>
    <div data-options="region:'center',title:'中部面板',border:false" style="padding:5px;">
        <div class="easyui-tabs" data-options="fit:true">
            <div id="pTab1" data-options="title:'标签页1号面板'" style="padding:10px;">
                <a id="btnCheckInTab" class="easyui-linkbutton" data-options="iconCls:'icon-add'">检查 标签页1号面板</a>
                <br />
                <div id="w1" class="easyui-window" data-options="iconCls:'icon-add',title:'这是个Window',closed:false,inline:true,left:40,top:120" style="height:140px;width:350px;padding:5px;">
                    Window里的内容
                    <br /><br />
                    <a id="btnCheckInWindow" class="easyui-linkbutton" data-options="iconCls:'icon-add'">检查 Window面板</a>
                </div>
                <div id="d1" class="easyui-dialog" data-options="iconCls: 'icon-add', title: '这是个Dialog', closed: false, inline: true,left:420,top:190" style="height:170px;width:350px;padding:5px;">
                    Dialog里的内容
                    <br /><br />
                    <a id="btnCheckInDialog" class="easyui-linkbutton" data-options="iconCls:'icon-add'">检查 Dialog面板</a>
                    <br /><br />
                    由于 dialog 继承于 window ，所以 dialog-panel 一定也存在于 window 中
                </div>
            </div>
            <div data-options="title:'标签页2号面板'" style="padding:10px;">
                标签页2号面板的内容
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $("#btnCheckInLayout").click(function () {
            var ret1 = $("#pNorth").panel("isRegion");
            var ret2 = $("#pNorth").panel("isAccordion");
            var ret3 = $("#pNorth").panel("isTab");
            var ret4 = $("#pNorth").panel("isWindow");
            var ret5 = $("#pNorth").panel("isDialog");

            alert("北部面板 " + (ret1 ? "是" : "不是") + " layout 中的 region-panel");
            alert("北部面板 " + (ret2 ? "是" : "不是") + " accordion 中的 panel");
            alert("北部面板 " + (ret3 ? "是" : "不是") + " tabs 中的 tab-panel");
            alert("北部面板 " + (ret4 ? "是" : "不是") + " window 中的 panel");
            alert("北部面板 " + (ret5 ? "是" : "不是") + " dialog 中的 panel");
        });

        $("#btnCheckInArrordion").click(function () {
            var ret1 = $("#pAccordion1").panel("isRegion");
            var ret2 = $("#pAccordion1").panel("isAccordion");
            var ret3 = $("#pAccordion1").panel("isTab");
            var ret4 = $("#pAccordion1").panel("isWindow");
            var ret5 = $("#pAccordion1").panel("isDialog");

            alert("手风琴1号面板 " + (ret1 ? "是" : "不是") + " layout 中的 region-panel");
            alert("手风琴1号面板 " + (ret2 ? "是" : "不是") + " accordion 中的 panel");
            alert("手风琴1号面板 " + (ret3 ? "是" : "不是") + " tabs 中的 tab-panel");
            alert("手风琴1号面板 " + (ret4 ? "是" : "不是") + " window 中的 panel");
            alert("手风琴1号面板 " + (ret5 ? "是" : "不是") + " dialog 中的 panel");
        });

        $("#btnCheckInTab").click(function () {
            var ret1 = $("#pTab1").panel("isRegion");
            var ret2 = $("#pTab1").panel("isAccordion");
            var ret3 = $("#pTab1").panel("isTab");
            var ret4 = $("#pTab1").panel("isWindow");
            var ret5 = $("#pTab1").panel("isDialog");

            alert("标签页1号面板 " + (ret1 ? "是" : "不是") + " layout 中的 region-panel");
            alert("标签页1号面板 " + (ret2 ? "是" : "不是") + " accordion 中的 panel");
            alert("标签页1号面板 " + (ret3 ? "是" : "不是") + " tabs 中的 tab-panel");
            alert("标签页1号面板 " + (ret4 ? "是" : "不是") + " window 中的 panel");
            alert("标签页1号面板 " + (ret5 ? "是" : "不是") + " dialog 中的 panel");
        });


        $("#btnCheckInWindow").click(function () {
            var ret1 = $("#w1").panel("isRegion");
            var ret2 = $("#w1").panel("isAccordion");
            var ret3 = $("#w1").panel("isTab");
            var ret4 = $("#w1").panel("isWindow");
            var ret5 = $("#w1").panel("isDialog");

            alert("Window面板 " + (ret1 ? "是" : "不是") + " layout 中的 region-panel");
            alert("Window面板 " + (ret2 ? "是" : "不是") + " accordion 中的 panel");
            alert("Window面板 " + (ret3 ? "是" : "不是") + " tabs 中的 tab-panel");
            alert("Window面板 " + (ret4 ? "是" : "不是") + " window 中的 panel");
            alert("Window面板 " + (ret5 ? "是" : "不是") + " dialog 中的 panel");
        });

        $("#btnCheckInDialog").click(function () {
            var ret1 = $("#d1").panel("isRegion");
            var ret2 = $("#d1").panel("isAccordion");
            var ret3 = $("#d1").panel("isTab");
            var ret4 = $("#d1").panel("isWindow");
            var ret5 = $("#d1").panel("isDialog");

            alert("Dialog面板 " + (ret1 ? "是" : "不是") + " layout 中的 region-panel");
            alert("Dialog面板 " + (ret2 ? "是" : "不是") + " accordion 中的 panel");
            alert("Dialog面板 " + (ret3 ? "是" : "不是") + " tabs 中的 tab-panel");
            alert("Dialog面板 " + (ret4 ? "是" : "不是") + " window 中的 panel");
            alert("Dialog面板 " + (ret5 ? "是" : "不是") + " dialog 中的 panel");
        });
    });
</script>